<template>
  <div class="topDivSerch">
    <div class="m-type-area">
      <div class="am-input-group">
        <input v-model="searchData" type="search" class="am-form-field search" placeholder="搜索">
        <span class="am-input-group-btn">
          <button @click="handleSearchClick" class="title_serch  button buttonclick search_btn" type="button" id="search_btn">搜索</button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListSearch',
  data () {
    return {
      searchData: ''
    }
  },
  methods: {
    handleSearchClick () {
      this.$router.push({ path: '/list', query: { searchname: this.searchData } })
    },
    keywordVal () {
      this.searchData = this.$route.query.searchname
    }
  },
  mounted () {
    this.keywordVal()
  }
}
</script>

<style lang="stylus" scoped>
  .topDivSerch
    position: fixed
    z-index: 100
    width: 100%
    padding: .14rem .2rem .14rem .2rem
    height: 1.04rem
    background-color: #f8f8f8
    box-sizing: border-box
    .m-type-area
      z-index: 100
      top: .98rem
      width: 100%
      padding: 0
      .am-input-group
        position: relative
        display: flex
        border-collapse: separate
        .search
          background: url(../../../assets/img/icon_search.png) no-repeat .2rem
          background-color: white
          padding-left: .7rem
          font-size: 1em
          text-align: left
          border: .02rem solid #e1e1e1
          height: .76rem
          flex: 1
        .am-input-group-btn
          position: relative
          font-size: 0
          white-space: nowrap
          .title_serch
            margin-left: .12rem
            background-color: white
            font-size: .28rem
            border-color: #ddd !important
            height: .76rem
            color: #353535 !important
            padding: .1rem .3rem .1rem .3rem
            border: .02rem solid #ccc
</style>
